<template>
  <div class="ques_box">
    <p class="border-bottom">
      <span class="iconfont">&#xe61d;</span>
      <span class="rank">世界编程语言排行</span>
      <span class="time">2019年4月(1-10)</span>
    </p>
    <ul>
      <li>
        <span>排行</span><span>语言</span>
        <span>份额</span><span>增减比</span>
      </li>
      <template  v-for="items of language">
        <li  :key="items.id">
          <span>{{items.rank}}</span><span>{{items.language}}</span>
          <span>{{items.share}}</span><span>{{items.trend}}</span>
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeRank',
  data () {
    return {
      language: [
        {id: '01', rank: '1', language: 'Java', share: '15.035%', trend: '-0.74%'},
        {id: '02', rank: '2', language: 'C', share: '14.076%', trend: '+0.49%'},
        {id: '03', rank: '3', language: 'C++', share: '8.838%', trend: '+1.62%'},
        {id: '04', rank: '4', language: 'Python', share: '8.166%', trend: '+2.36%'},
        {id: '05', rank: '5', language: 'Visual Basic .NET', share: '5.795%', trend: '+0.85%'},
        {id: '06', rank: '6', language: 'C#', share: '3.513%', trend: '-1.75%'},
        {id: '07', rank: '7', language: 'Javascript', share: '2.507%', trend: '-0.99%'},
        {id: '08', rank: '8', language: 'SQL', share: '2.272%', trend: '-0.38%'},
        {id: '09', rank: '9', language: 'PHP', share: '2.239%', trend: '-1.98%'},
        {id: '10', rank: '10', language: 'Assembly', share: '1.710%', trend: '+0.05%'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .ques_box{
    float: right
    margin-top: .5rem
    margin-right: .05rem
    width: 340px
    height: auto
    background-color: white
    p{
      padding-top: .05rem
      padding-left: .2rem
      padding-bottom: .2rem
      margin: 0
      text-align: left
      color: #555
      font-size: .49rem
      font-family: '宋体'
      color: rgb(60,141,188)
      font-weight: bolder
      .rank{
        display: inline-block
        margin-left: .3rem
      }
      .time{
        display: inline-block
        margin-left: 1.3rem
      }
      .iconfont{
        display: inline-block
        position: relative
        left: 0px
        top: 15px
        font-size: .7rem
        color: rgb(60,141,188)
      }
    }
    ul{
      list-style: none
      padding: 0
      margin: 0
      li{
        padding: .2rem
        span{
          font-size: .35rem
          font-weight: bold
        }
        span + span{
          margin-left: .6rem
        }
        span + span + span{
          margin-left: 1.2rem
        }
      }
      li + li{
        border-top: 1px solid rgb(210,210,210)
        span + span{
          display: inline-block
          width: 45px
          text-align: center
          font-size: .25rem
          font-weight: 100
          margin-left: 1rem
        }
      }
      li:last-child{
        span + span{
          margin-left: .93rem
        }
      }
    }
  }
</style>
